<template>
	<view class="square-item-wrap" @click="gotoRouter('/pages-client/square/squareInfo?id=' + data.id)">
		<view class="square-user flex-row">
			<image class="square-user-avatar" :src="data.avatar"></image>
			<view class="square-username">{{ data.nickname }}</view>
			<view v-if="!izAttention" class="square-attention-user" @click.stop="attentionUser">关注</view>
			<view v-if="izAttention" class="square-attention-cancel" @click.stop="cancelAttentionUser">已关注</view>
		</view>

		<view class="square-box flex-col">
			<view class="square-name">{{ data.title }}</view>
			<view class="square-content nowrap">{{ data.content }}</view>
			<view class="square-picture-list flex-row scrollX" v-if="pictureUrlList.length > 0">
				<view v-for="(item, index) in pictureUrlList" :key="item" @click.stop="previewImage(pictureUrlList, 0)">
					<image class="square-picture" :src="item" mode="aspectFill" />
				</view>
			</view>

			<view class="square-comment flex-row">
				<view v-if="!izPraise" class="flex-row" @click.stop="squareGiveALike">
					<uni-icons type="hand-up" size="18" color="#777"></uni-icons>
					<text class="text">点赞</text>
				</view>
				<view v-if="izPraise" class="flex-row" @click.stop="cancelSquareGiveALike">
					<uni-icons type="hand-up-filled" size="18" color="#9E8BFF"></uni-icons>
					<text class="text">已赞</text>
				</view>

				<view class="flex-row" v-if="!izCurrentUser">
					<uni-icons type="chat" size="18" color="#777"></uni-icons>
					<text class="text">去解答</text>
				</view>
				<view class="flex-row" v-if="izCurrentUser" @click.stop="removeSquare">
					<uni-icons type="trash" size="18" color="#777"></uni-icons>
					<text class="text">删除</text>
				</view>
				
				
				<!-- <view class="square-date">{{ data.createTime }}</view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		data: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			comment: null
		};
	},
	computed: {
		izPraise() {
			return this.data.izPraise;
		},
		izAttention() {
			return this.data.izAttention;
		},
		izCurrentUser() {
			return this.data.izCurrentUser;
		},
		pictureUrlList() {
			return this.data.pictureUrls ? this.data.pictureUrls.split(',') : [];
		}
	},
	created() {},

	methods: {
		//关注用户
		attentionUser() {
			this.$api
				.attentionUser({
					params: {
						userId: this.data.userId
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.data.izAttention = true;
					}
					this.$emit('attentionUser', this.data.userId);
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
		},

		//取消关注用户
		cancelAttentionUser() {
			this.$api
				.cancelAttentionUser({
					params: {
						userId: this.data.userId
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.data.izAttention = false;
					}
					this.$emit('cancelAttentionUser', this.data.userId);
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
		},

		//点赞动态
		squareGiveALike() {
			this.$api
				.squareGiveALike({
					params: {
						squareId: this.data.id
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.data.izPraise = true;
					}
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
		},

		//取消点赞动态
		cancelSquareGiveALike() {
			this.$api
				.cancelSquareGiveALike({
					params: {
						squareId: this.data.id
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.data.izPraise = false;
					}
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
		},
		//删除广场动态
		removeSquare() {
			uni.showModal({
				title: '确认删除吗？',
				success: res => {
					if (res.confirm) {
						this.$api
							.removeSquare({
								params: {
									id: this.data.id
								}
							})
							.then(res => {
								if (res.code == 200) {
									this.$emit('removeSquare');
									uni.showToast({
										title: '动态删除成功',
										icon: 'none'
									});
								}
							});
					}
				}
			});
		}
	}
};
</script>

<style lang="less">
.square-item-wrap {
	width: 690rpx;
	padding: 32rpx 0rpx 24rpx;
	background-color: rgba(255, 255, 255, 1);
	border-bottom: 1rpx solid #f8f8f8;
	box-sizing: border-box;

	.square-user {
		align-items: center;
		margin-bottom: 24rpx;
		.square-user-avatar {
			width: 60rpx;
			height: 60rpx;
			display: block;
			border-radius: 50%;
			margin-right: 30rpx;
		}
		.square-username {
			font-size: 32rpx;
			font-family: PingFangSC-Regular;
		}
		.square-attention-user {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: auto;
			width: 120rpx;
			height: 50rpx;
			background-color: #9e8bff;
			color: #fff;
			border-radius: 30rpx;
			font-size: 22rpx;
		}
		.square-attention-cancel {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: auto;
			font-size: 20rpx;
			width: 118rpx;
			height: 48rpx;
			color: #9e8bff;
			border-radius: 30rpx;
			border: 1rpx solid #9e8bff;
		}
	}

	.square-box {
		width: 100%;
		margin-top: 24rpx;
		.square-name {
			color: rgba(31, 40, 51, 1);
			font-size: 34rpx;
			font-family: PingFang-SC-Bold;
			margin-bottom: 12rpx;
		}
		.square-content {
			width: 590rpx;
			color: rgba(153, 153, 153, 1);
			font-size: 28rpx;
			margin-bottom: 12rpx;
		}

		.square-picture-list {
			display: flex;
			width: 690rpx;
			margin-bottom: 24rpx;
			margin-top: 12rpx;
			.square-picture {
				width: 240rpx;
				height: 240rpx;
				margin-right: 8rpx;
				border-radius: 12rpx;
			}
		}
	}

	.square-comment {
		width: 100%;
		padding: 20rpx 0 10rpx;
		justify-content: space-between;
		align-items: center;
		.input {
			width: 40vw;
			height: 70rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			border-radius: 60rpx;
			background-color: #f7f7f7;
		}

		.text {
			color: #777;
			font-size: 28rpx;
			margin-left: 10rpx;
		}
	}
}
</style>
